<template>
	<view>
		<u-navbar title="协议详情"  :autoBack="true">
		</u-navbar>
		<view class="container">
			<view class="list">
				<view class="title">{{info.title}}</view>
				<view class="title" v-html="info.content">
				</view>
			</view>
			<view class="sign" :style="{'display' : is_signed ? 'none' : 'block'}">
				<view class="c5">
					<view class="r1">
						<u-checkbox-group v-model="checkbox" placement="column" @change="checkboxChange">
							<u-checkbox class="boxTxt" style="margin: 0;" :customStyle="{marginBottom: '16rpx'}" label=''
								labelSize='28rpx' labelColor='rgba(17, 2, 2, 1)' inactiveColor='rgba(10, 22, 41, 1)'
								name='1'>
							</u-checkbox>
						</u-checkbox-group>
						<text class="read">我已阅读和知晓</text>
					</view>
					<view class="r2">
						<view class="but">
							<view class="s2" @click="onSend()">
								<text>签 名</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		check_file_is_signed
	} from '@/api/second.js'
	export default {
		data() {
			return {
				info: uni.getStorageSync('agreementInfo') || {},
				html: "欢迎使用我们的服务！我们深知个人信息的重要性，承诺尊重并保护您的隐私。以下是我们的隐私政策概述： 1、信息收集：",
				checkbox: [],
				num: '',
				is_signed: 1,
			}
		},
		onUnload() {
			uni.removeStorageSync('agreementInfo')
		},
		onLoad({
			file_no
		}) {
			this.num = file_no
			check_file_is_signed({
				file_no: this.num
			}).then(res => {
				this.is_signed = res.data.is_signed
			})
		},
		methods: {
			checkboxChange(n) {},
			onSend() {
				if (!this.checkbox.length) return this.$u.toast('请先阅读并同意协议')
				console.log(this.checkbox);
				uni.navigateTo({
					url: `/pages/second/signature?file_no=${this.num}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		margin: 40rpx;

		box-shadow: 0rpx 12rpx 116rpx 0rpx rgba(196, 203, 214, 0.1036);
		border-radius: 48rpx 48rpx 48rpx 48rpx;
		opacity: 1;

		.list {
			background: #FFFFFF;
			box-shadow: 0rpx 12rpx 116rpx 0rpx rgba(196, 203, 214, 0.1036);
			border-radius: 48rpx 48rpx 48rpx 48rpx;
			padding: 20rpx 40rpx;

			&:first-child {
				padding-top: 40rpx;
			}

			&:last-child {
				padding-bottom: 40rpx;
			}

			.title {
				font-weight: 700;
				color: #000000;
				padding-bottom: 20rpx;
				text-align: center;
			}


		}
		
		.show_sign {
			display: block;
		}

		.sign {
			margin-top: 52rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 12rpx 116rpx 0rpx rgba(196, 203, 214, 0.1036);
			border-radius: 48rpx 48rpx 48rpx 48rpx;
			padding: 20rpx 40rpx;
			display: none;
			
			.c5 {
				@include flex;
				padding: 36rpx 0;
				justify-content: space-between;
				align-items: center;

				.r1 {
					@include flex;
					align-items: center;

					text {
						font-size: 28rpx;
						color: rgba(17, 2, 2, 1);
					}
				}

				.read {
					color: #110202;
					font-size: 28rpx;
				}

				.but {
					@include flex;

					.s2 {
						width: 206rpx;
						height: 88rpx;
						background: #7677EB;
						box-shadow: 0 12rpx 24rpx 0 rgba(63, 140, 255, 0.2637);
						border-radius: 28rpx;
						margin: 0 auto;
						text-align: center;

						text {
							font-size: 30rpx;
							font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
							font-weight: 400;
							color: #FFFFFF;
							line-height: 88rpx;
						}
					}
				}
			}
		}
	}
</style>